<template>
	<div>
		<!-- 导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card class="box-card">

			<!-- 商品分类列表 -->
			<el-table :data="categorylist" border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="商品分类" prop="name"></el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
			 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="list_count">
			</el-pagination>
			
			<!-- 删除商品分类对话框 -->
			<el-dialog title="删除商品分类" :visible.sync="deleteDialogVisible" width="30%">
				<span>确定删除商品分类吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="deleteDialogVisible = false;deletecategory()">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				deleteDialogVisible: false,
				categoryId: -1,
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					// 这里的page_size的值要与上文中列表中可选值一致
					"page_size": 5,
					"query": ""
				},
				categorylist: [],
				list_count: 0,
			}
		},
		created() {
			this.getcategorylist();
		},
		methods: {
			async getcategorylist() {
				const {
					data: res
				} = await this.$http.get('categoryapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.categorylist = res.results;
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getcategorylist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				this.getcategorylist();
			},
			showDeleteDialog(id){
				this.deleteDialogVisible = true;
				this.categoryId = id;
			},
			async deletecategory(){
				let url = "categoryapi/operation/" + this.categoryId +"/?token=" + window.sessionStorage.getItem("token");
				const {
					data: res
				} = await this.$http.delete(url);
				if(!res){
					this.$message.success("删除商品分类成功");
					this.query_info.page = 1;
					this.getcategorylist();
				}else {
					this.$message.error("删除商品分类失败");
				}
			}
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
</style>
